/*
 * Copyright (C) 2014 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

/*
@styleguide Expanding Message Link

<br/>

A right- or left-aligned link that expands on hover or
focus to reveal a prompt. Useful for close buttons or
navigations.

The Expanding Message Link can be expanded via javascript
by adding the `.ic-Expand-link--active` class to the
`.ic-Expand-link` element.

```html
<div class="content-box">
  <div class="grid-row">
      <div class="col-xs-6">

        <!-- Begin ic-Expand-link markup!! -->
        <div class="ic-Expand-link">
          <a href="#" class="close_wizard_link ic-Expand-link__trigger">
            <div class="ic-Expand-link__layout">
              <i class="icon-hamburger ic-Expand-link__icon"></i>
              <span class="ic-Expand-link__text">I am the default</span>
            </div>
          </a>
        </div>
        <!-- End ic-Expand-link markup!! -->

      </div>

      <div class="col-xs-6">

        <!-- Begin ic-Expand-link markup!! -->
        <div class="ic-Expand-link ic-Expand-link--from-right ic-Expand-link--active">
          <a href="#" class="close_wizard_link ic-Expand-link__trigger">
            <div class="ic-Expand-link__layout">
              <i class="icon-x ic-Expand-link__icon"></i>
              <span class="ic-Expand-link__text">I am aligned right / active</span>
            </div>
          </a>
        </div>
        <!-- End ic-Expand-link markup!! -->

      </div>
  </div>
</div>

<div class="content-box">
  <div class="grid-row">
      <div class="col-xs-6">

        <!-- Begin ic-Expand-link markup!! -->
        <div class="ic-Expand-link ic-Expand-link--from-right ic-Expand-link--Success">
          <a href="#" class="close_wizard_link ic-Expand-link__trigger">
            <div class="ic-Expand-link__layout">
              <i class="icon-check ic-Expand-link__icon"></i>
              <span class="ic-Expand-link__text">I am branded w $ic-color-success</span>
            </div>
          </a>
        </div>
        <!-- End ic-Expand-link markup!! -->

      </div>
  </div>
</div>

<div class="content-box">
  <div class="grid-row">
      <div class="col-xs-6">

        <!-- Begin ic-Expand-link markup!! -->
        <div class="ic-Expand-link ic-Expand-link--Danger">
          <a href="#" class="close_wizard_link ic-Expand-link__trigger">
            <div class="ic-Expand-link__layout">
              <i class="icon-warning ic-Expand-link__icon"></i>
              <span class="ic-Expand-link__text">I am branded w $ic-color-danger</span>
            </div>
          </a>
        </div>
        <!-- End ic-Expand-link markup!! -->

      </div>

      <div class="col-xs-6" style="background: url(http:&#47;&#47;placekitten.com&#47;500&#47;300) no-repeat #333; padding-bottom: 12px;">

        <!-- Begin ic-Expand-link markup!! -->
        <div class="ic-Expand-link ic-Expand-link--from-right ic-Expand-link--Light">
          <a href="#" class="close_wizard_link ic-Expand-link__trigger">
            <div class="ic-Expand-link__layout">
              <i class="icon-x ic-Expand-link__icon"></i>
              <span class="ic-Expand-link__text">I am on a dark background</span>
            </div>
          </a>
        </div>
        <!-- End ic-Expand-link markup!! -->

      </div>
  </div>
</div>


```
*/

$ic-Expand-link-size: $ic-sp*4;

@mixin ic-Expand-link-branding(
  $bg-color: rgba($ic-color-dark, 0.8),
  $bg-color-hover: $ic-color-dark,
  $text-color: $ic-color-light) {

  .ic-Expand-link__trigger {
    .ic-Expand-link__layout {
      background: $bg-color;
      color: $text-color;
    }
    &:hover, &:focus {
      .ic-Expand-link__layout { background: $bg-color-hover; }
    }
  }

  &.ic-Expand-link--from-right {
    .ic-Expand-link__trigger {
      &:hover, &:focus { background: $bg-color-hover; }
    }
  }

}

@mixin ic-Expand-link-active-state {
  transform: translateX(0);
  .ic-Expand-link__icon { background: rgba(black, 0.15); }
}

.ic-Expand-link {
  * { box-sizing: border-box; }

  display: flex;
  overflow: hidden;

  .ic-Expand-link__trigger {
    transition: all 1s $ic-transition;
    transform: translateX(-100%) translateX($ic-Expand-link-size);
    text-transform: uppercase;
    overflow: hidden;

    // HACK because IE10 can't get the transforms right. Once we stop supporting IE10, we can remove this
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      transform: translateX(0);
    }

    &:hover, &:focus {
      @include ic-Expand-link-active-state;
      text-decoration: none;
      outline: none;
    }

  }

  .ic-Expand-link__layout {
    position: relative;
    display: flex;
    padding: 0 $ic-Expand-link-size 0 0;
    min-height: $ic-Expand-link-size;
  }

  .ic-Expand-link__text {
    display: flex;
    align-items: center;
    padding: $ic-sp;
    line-height: 1.1;
    min-height: $ic-Expand-link-size;
  }

  .ic-Expand-link__icon {
    transition: all 0.3s;
    width: $ic-Expand-link-size;
    height: $ic-Expand-link-size;
    line-height: 1;
    position: absolute;
    top: 0; right: 0;
    text-align: center;
    &:before {
      top: $ic-sp/2;
      font-size: $ic-Expand-link-size - $ic-sp;
    }
  }

  // Adding active class in case the link ever needs to be activated via script
  &.ic-Expand-link--active {
    .ic-Expand-link__trigger { @include ic-Expand-link-active-state; }
  }

  &.ic-Expand-link--from-right {
    justify-content: flex-end;

    .ic-Expand-link__trigger {
      transform: translateX(100%) translateX( -($ic-Expand-link-size) );

      // HACK because IE10 can't get the transforms right. Once we stop supporting IE10, we can remove this
      @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
        transform: translateX(0);
      }

      &:hover, &:focus {
        @include ic-Expand-link-active-state;
      }
    }

    .ic-Expand-link__layout { padding: 0 0 0 $ic-Expand-link-size; }
    .ic-Expand-link__icon { right: auto; left: 0; }

    &.ic-Expand-link--active {
      .ic-Expand-link__trigger { @include ic-Expand-link-active-state; }
    }

  }

  // Branding -- call the mixin with just defaults to establish basic branding
  @include ic-Expand-link-branding;

  &.ic-Expand-link--Success { @include ic-Expand-link-branding(rgba($ic-color-success, 0.8),$ic-color-success,$ic-color-light); }
  &.ic-Expand-link--Danger { @include ic-Expand-link-branding(rgba($ic-color-danger, 0.8),$ic-color-danger,$ic-color-light); }
  &.ic-Expand-link--Light { @include ic-Expand-link-branding(rgba($ic-color-light, 0.8),$ic-color-light,$ic-color-dark); }

}
